<template>
  <view class="wk-swper">
    <!-- 指示器 -->
    <view class="wk-swper-dot flex items-center justify-center">
      <view
        class="wk-swper-dot-item"
        :class="{ active: index === current }"
        v-for="(item, index) in swiperList"
        :key="index"
      ></view>
    </view>
    <!-- 轮播图 -->
    <swiper
      class="wk-swper-container"
      :indicator-dots="false"
      autoplay
      :interval="3000"
      @change="swiperChange"
      :style="{ height }"
    >
      <swiper-item v-for="(item, index) in swiperList" :key="index">
        <slot :item="item" :index="index">
          <image
            :src="item.image"
            mode="widthFix"
            style="width: 100%"
            @click="imageClick(item, index)"
          />
        </slot>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    // 轮播图数据
    swiperList: {
      type: Array,
      default: () => [
        {
          image:
            "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {
          image:
            "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
        {
          image:
            "https://img0.baidu.com/it/u=2862534777,914942650&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        },
      ],
    },
    height: {
      type: String,
      default: "420rpx",
    },
  },
  data() {
    return {
      current: 0,
    };
  },
  methods: {
    swiperChange({ detail }) {
      this.current = detail.current;
    },
    imageClick(item, index) {
      this.$emit("imageClick", item, index);
    },
  },
};
</script>

<style lang="scss" scoped>
.wk-swper {
  position: relative;
  height: 100%;
  &-dot {
    position: absolute;
    bottom: 20rpx;
    width: 100%;
  }
  .wk-swper-dot {
    &-item {
      width: 8rpx;
      height: 8rpx;
      border-radius: 50%;
      border: 2rpx solid #fff;
      margin: 0 6rpx;
      z-index: 9;
      &.active {
        background-color: $smt-theme-color;
        border-color: $smt-theme-color;
      }
    }
  }
}
</style>
